<template>
  <div class="listen_item" @click="goDetail">
    <img
      class="listen_item_img"
      :src="data.coverPathSmall"
      alt=""
    />
    <div class="right">
      <div class="right_text">{{ data.title }}</div>
      <div class="right_bottom">
        <svg
          t="1692756053488"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3977"
          width="12"
          height="12"
        >
          <path
            d="M374.6 636.5c4.4 0 8.5-1.2 12.1-3.3l171.7-100c8-3.6 13.6-11.9 13.6-21.5 0-8.8-4.8-16.6-11.9-20.7l-167.8-97.8c-4.3-5-10.7-8.1-17.7-8.1-13.1 0-23.6 10.7-23.6 23.8v1.3l-0.3 0.2 0.4 199.8c-0.1 0.8-0.1 1.6-0.1 2.5 0 13.2 10.6 23.8 23.6 23.8z"
            fill="#8a8a8a"
            p-id="3978"
          ></path>
          <path
            d="M64.7 586.3a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z"
            fill="#8a8a8a"
            p-id="3979"
          ></path>
          <path
            d="M960 398.3c0.1-1.6 0.2-3.2 0.2-4.8 0-35-28.5-63.3-63.6-63.3-11.7 0-22.7 3.2-32.2 8.7l-0.5-0.3-31.5 18.2v-64.7c-0.1-73.1-59.9-133-133.1-133H197.4c-73.1 0-133 59.8-133 133v165.8h0.2c0 17.7 14.4 32.1 32.2 32.1s32.2-14.4 32.2-32.1h0.2V287c0-35.2 28.8-64 64-64h510.2c35.2 0 64 28.8 64 64v448.9c0 35.2-28.8 64-64 64H193.3c-35.2 0-64-28.8-64-64v-21.4c0-17.7-14.4-32.1-32.2-32.1-17.8 0-32.2 14.4-32.2 32.1h-0.4v15.3c0 73.2 59.9 133 133 133h501.9c73.2 0 133-59.8 133-133v-64.1l33.1 19.1 0.1-0.1c9.2 5.1 19.8 8 31 8 35.1 0 63.6-28.4 63.6-63.3 0-1.6-0.1-3.2-0.2-4.8V398.3z m-63.6 205.1c-0.3 7.8-6.9 14.1-15 14.1-2.7 0-5.3-0.7-7.5-2l-41.5-23.7V430.1l40.9-23.2c2.3-1.5 5.1-2.3 8.1-2.3 8.3 0 15 6.6 15 14.6v184.2z"
            fill="#8a8a8a"
            p-id="3980"
          ></path>
        </svg>
        &nbsp;
        {{ data.dataCount }}
        &nbsp;
        &nbsp;
        {{ formattedDate }}更新
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['data'])
import dayjs from 'dayjs'
import { ref } from 'vue';
const formattedDate = ref(dayjs(props.data.releaseAt).format('YYYY-MM-DD'))

const goDetail = () => {
  window.location.assign(`https://m.ximalaya.com/revision/subject/category${props.data.url}`)
}
</script>

<style scoped lang="less">
.listen_item {
  display: flex;
  // align-items: center;
  margin-left: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  .listen_item_img {
    width: 70px;
    height: 70px;
  }
  .right {
    position: relative;
    margin-left: 10px;
    .right_text {
      font-size: 16px;
      color: #40404c;
    }
    .right_bottom {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 0;
        font-size: 12px;
        color: #aaa;
    }
  }
}
</style>
